<script setup>
import { ref, reactive } from 'vue'

import { getAllWarehouseInfoApi } from '@/api/warehousingentry/warehousing'

// 定义 emit 函数
const emit = defineEmits(['confirm'])


// 弹窗状态
const dialogVisible = ref(false)
const dialogTitle = ref('库位选择框')

// 搜索相关
const searchForm = ref({
  locaCode: ''
})
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 数据相关
const locations = ref([])

// 选中项
const selectedLocations = ref([])

// 打开弹窗
const open = (type) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'source' ? '来源库位选择' : '目标库位选择'
  fetchLocations()
}

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false
  selectedLocations.value = []
}

// 获取库位数据
const fetchLocations = async () => {
  const res = await getAllWarehouseInfoApi(searchForm.value.locaCode, currentPage.value, pageSize.value)
  locations.value = res.rows || []
  total.value = res.total || 0
}

// 搜索
const searchLocations = () => {
  currentPage.value = 1
  fetchLocations()
}

// 重置搜索
const resetSearch = () => {
  searchKeyword.value = ''
  currentPage.value = 1
  fetchLocations()
}

// 分页变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchLocations()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchLocations()
}

// 选择变化
const handleSelectionChange = (selected) => {
  selectedLocations.value = selected
}

// 确认选择
const confirmSelection = () => {
  emit('confirm', selectedLocations.value)
  closeDialog()
}
defineExpose({
  open,
  closeDialog
})
</script>
<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="55%" :close-on-click-modal="false">
    <div class="location-select-container">
      <!-- 搜索区域 -->
      <div class="search-panel">
        <div class="search-actions">
          <el-button size="small" @click="resetSearch">重置</el-button>
          <el-button size="small" type="primary" @click="searchLocations">搜索</el-button>
        </div>
        <div class="search-input">
          <el-input v-model="searchForm.locaCode" placeholder="库位编码" clearable />
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-panel">
        <el-table :data="locations" style="width: 100%" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="warehouseName" label="仓库名称" width="120" />
          <el-table-column prop="warehouseAreaName" label="库区名称" width="120" />
          <el-table-column prop="category" label="库区类型" width="120" />
          <el-table-column prop="locaCode" label="库位编码" width="120" />
          <el-table-column prop="locaLen" label="库位长" width="120" />
          <el-table-column prop="locaWidth" label="库位宽" width="120" />
          <el-table-column prop="locaHeight" label="库位高" width="120" />
          <el-table-column prop="localVolume" label="库位容积" width="120" />
          <el-table-column prop="localBearingCapacity" label="库位承重" width="120" />
          <el-table-column prop="tunnelNumber" label="巷道号" width="120" />
          <el-table-column prop="shelfNumber" label="货架号" width="120" />
          <el-table-column prop="layerNumber" label="层号" width="120" />
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-panel">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="confirmSelection">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>



<style scoped>
.location-select-container {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.search-panel {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.search-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.search-input {
  width: 200px;
}

.table-panel {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.pagination-panel {
  padding: 10px;
  text-align: right;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>